import Table from '@/components/Table'
import { StyledContainer } from '../style'
import useService from './service'
import { RangePicker, Input } from '@kedacom/react-next'
import { SearchIcon } from '../style'
import { t } from 'i18next'
import dayjs from '@/plugins/dayjs'

export interface MccMeetingLogProps {
	minDate: string
}

export default function MccMeetingLog(props: MccMeetingLogProps) {
	const { minDate } = props
	const { columns, data, params, pager, isSearch, onSearch, changeParam, resetSettingParam, onPageChange } =
		useService()
	return (
		<StyledContainer className="mcc-log-container">
			<div className="operate-bar">
				<div className="search-bar">
					<Input
						className="name-input"
						width={150}
						maxLength={32}
						placeholder={t('会议名称')}
						value={params.meeting_name}
						onChange={(e, val) => changeParam({ type: 'meeting_name', payLoad: val })}
					/>
					<Input
						className="operator-input"
						width={150}
						maxLength={32}
						placeholder={t('会议发起人')}
						value={params.operator}
						onChange={(e, val) => changeParam({ type: 'operator', payLoad: val })}
					/>
					<RangePicker
						className="date"
						value={[params.start_date, params.end_date]}
						minDate={minDate}
						maxDate={dayjs()}
						i18n={{
							confirm: t('确认'),
							year: t('年'),
							month: [
								t('一月'),
								t('二月'),
								t('三月'),
								t('四月'),
								t('五月'),
								t('六月'),
								t('七月'),
								t('八月'),
								t('九月'),
								t('十月'),
								t('十一月'),
								t('十二月'),
							],
							week: [t('日'), t('一'), t('二'), t('三'), t('四'), t('五'), t('六')],
						}}
						onChange={(e, arr) => {
							let startDate = arr[0] ?? '',
								endDate = arr[1] ?? ''
							startDate !== params.start_date && changeParam({ type: 'start_date', payLoad: startDate })
							endDate !== params.end_date && changeParam({ type: 'end_date', payLoad: endDate })
						}}
					/>
					<SearchIcon className="search-btn" onClick={onSearch} />
					{isSearch && (
						<span className="total-msg">
							{t('相关搜索结果{{total}}个', { total: pager.total })}
							<span className="reset" onClick={resetSettingParam}>
								{t('清空筛选')}
							</span>
						</span>
					)}
				</div>
			</div>

			<Table
				rowIdField={'meeting_moid'}
				columns={columns}
				tableDataList={data}
				pager={pager}
				showSelectColumn={false}
				onPageChange={onPageChange}
				i18n={{ order: t('序号') }}
				nodata={t('暂无数据')}
			/>
		</StyledContainer>
	)
}
